<template>
    
    <div>
        <div class="box2">
            <van-nav-bar title="商品列表"  left-arrow :border="false" @click-left="onleft">
            </van-nav-bar>
            <van-search
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
    >
      <template #action>
        <div class="text" @click="onSearch">
            <van-icon name="comment-o" />
        </div>
      </template>
    </van-search>
        </div>

<div class="big">
    <div class="big1">
        <van-sidebar v-model="activeKey" >
          <van-sidebar-item :title="v" v-for="(v,index) in text" :key="index" @click="fun(index)"/>
        </van-sidebar>
    </div>

    <div class="right">
        <div class="box" v-for="(i,index1) in arr2" :key="index1">
            <!-- <div class="top">{{ arr[0].data1[0].title }} &emsp;></div> -->
            <div class="top">{{ i[0].title }} &emsp;></div>
            <div class="img">
                <div class="main" v-for="(v,index) in i" :key="index">
                    <img :src="v.myimg" alt="">
                    <p class="name">{{v.urname}}</p>
                </div>
            </div>
        </div>
    </div>
</div>

<van-tabbar :placeholder=true v-model="active">
        <van-tabbar-item @click="fun1" :to="'/total'" icon="wap-home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
        <van-tabbar-item icon="browsing-history-o" @click="fun2">发现</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
        <van-tabbar-item :to="'/my'" icon="user-o">我的</van-tabbar-item>
      </van-tabbar>

    </div>

</template>

<script>
import Vue from 'vue';
import { Sidebar, SidebarItem } from 'vant';

Vue.use(Sidebar);
Vue.use(SidebarItem);
import { NavBar } from 'vant';
import { Search } from 'vant';

Vue.use(Search);

import { Icon } from 'vant';

Vue.use(Icon);
Vue.use(NavBar);

import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
    data() {
        return{
            activeKey: 0,
            text:"",
            arr:"",
            arr2:"",
            active:1
            
        }
    },
    methods:{
        onSearch(){
            console.log(搜索);
        },
        onleft(){
            window.scrollTo({left:0,top:0})
            this.$router.push('/total').catch(err=>{})
            
        },
        fun1(){
            window.scrollTo({left:0,top:0})
        },
        fun2(){
           this.$router.push({path:"/action"}).catch(err=>{})
        },
        fun(index){
            if(index===1){
                window.scrollTo({left:0,top:1380,})
            }else if(index===0){
                window.scrollTo({left:0,top:0})
            }else if(index===2){
                window.scrollTo({left:0,top:1940})
            }else if(index===3){
                window.scrollTo({left:0,top:2700})
            }else if(index===4){
                window.scrollTo({left:0,top:3470})
            }else if(index==5){
                window.scrollTo({left:0,top:4240})
            }else if(index==6){
                window.scrollTo({left:0,top:5000})
            }
        }
    },
    mounted(){
        this.$http({
            url:"http://localhost:3000/classification",
            method:"get"
        }).then(res=>{
            this.arr=res.data[0].data.right
            this.arr2= Object.keys(res.data[0].data.right[0]).map(item => res.data[0].data.right[0][item])
            this.text=res.data[0].data.left[0].text
        })
    }
}
</script>

<style scoped>


.van-sidebar{
    position: fixed;
    left: 0;
}
.van-icon{
    font-size: 24px;
    /* margin-top: 5px; */
}
.text{
    padding-top: 10px;
}
.van-sidebar-item--select, .van-sidebar-item--select:active{
    width: 100px;
}
.van-sidebar{
    width: 100px;
}
.big{
    display: flex;
}
.right{
    flex: 1;

}
.right img {
    width: 100%;
}
.top{
    text-align: center;
    margin-top: 20px;
}
.name{
    font-size: 12px;
    text-align: center;
}
.main{
    width: 30%;
    margin-left: 8px;
    margin-top: 10px;
}
.img{
    display: flex;
    flex-wrap: wrap;
}
/* .van-nav-bar{
    position: fixed;
    top: 0;
} */
.big1{
    height: 100%;
    width: 100px;
}
.box2{
    position: sticky;
    top: 0;
}

</style>